<template>
  <div class="h_img" v-if="shade">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <image :src="list.ttx_pic" mode="widthFix" class="bj"></image>
    <div class="img_content">
      <div class="content_l">
        <span class="h_tag">{{ list.ttx_name }}<b> - {{ list.ttx_lx }}</b></span>
        <span class="h_content" v-if="list.ttx_content">{{ list.ttx_content }}</span>
        <span class="h_vod">{{ list.ttx_vod }}个视频</span>
      </div>
    </div>
    <view class="flex_item">
      <view :class="num == index ? 'bor-ra':'bor-ra2'" @click="dataBtn(index)" v-for="(item,index) in Data"
        :key="index">
        {{ item }}
        <view class="hengheng" v-if="num == index">

        </view>
      </view>
    </view>
    <view class="indexbox">
      <view :class="list.ttx_css == 'col-style-2'?'indexbox_left':'indexbox_left2'" v-for="(item,index) in vidoList"
        :key="index">
        <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }"
          v-if="vidoList && item.vod_url">

        </view>
        <view v-else @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }"></view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl2+')' }"></view>
          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>

          <view class="inl_content">{{ item.vod_name }}</view>
        </view>

      </view>
    </view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        list: [],
        css: '',
        num: 0,
        gifUrl2: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        scztList: [],
        vidoList: [],
        page: 1,
        shade: false,
        tag: '',
        Data: ['最新', '最热']
      }
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          let token = uni.getStorageSync('token') || 'none';
          if (token == 'none') {
            uni.showModal({
              title: '提示',
              content: "请登录！",
              success: function(res) {
                if (res.confirm) {
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }
              }
            })
          }
        })
      },
      dataBtn(index) {
        uni.showLoading({
          title: '加载中'
        })
        this.page = 1;
        this.num = index;
        if (index == 0) {
          this.tab1();
        } else if (index == 1) {
          this.tab2();
        }
        setTimeout(() => {
          uni.hideLoading()
        }, 500)
      },
      ttx() {
        this.$http.ttx({
          lx: this.tag,
          ttx: this.id
        }).then(res => {
          if (res.code == 200) {
            this.list = res.data.ttx[0];
          }
        })
      },
      tab1() {
        this.$http.tab1({
          p: this.page,
          t: this.id,
          l: this.tag
        }).then(res => {
          if (res.code == 200) {
            this.shade = true;
            this.vidoList = res.data.tab1list;
          }
        })
      },
      tab2() {
        this.$http.tab2({
          p: this.page,
          t: this.id,
          l: this.tag
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = res.data.tab1list;
          }
        })
      },
      playBtn(item) {
        uni.navigateTo({
          url: `../player?playid=${item.vod_id}`
        })
      },
    },
    onReachBottom() {
      uni.showLoading({
        title: '加载中'
      })
      this.page++;
      if (this.num == 0) {
        this.$http.tab1({
          p: this.page,
          t: this.id,
          l: this.tag
        }).then(res => {
          if (res.code == 200) {
            if (res.data.tab1list == null) {
              this.$toast('没有更多了~');
              return;
            }
            this.vidoList = this.vidoList.concat(res.data.tab1list);
          }
        })
      } else if (this.num == 1) {
        this.$http.tab2({
          p: this.page,
          t: this.id,
          l: this.tag
        }).then(res => {
          if (res.code == 200) {
            if (res.data.tab1list == null) {
              this.$toast('没有更多了~');
              return;
            }
            this.vidoList = this.vidoList.concat(res.data.tab1list);
          }
        })
      }
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    },
    onLoad(opt) {
      this.id = opt.id || 0;
      this.tag = opt.tag || 0;
      this.css = opt.css || 0;
      uni.showLoading({
        title: '加载中'
      })
      this.ttx();
      this.tab1();
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    }
  }
</script>

<style lang="less">
  .h_img {
    padding-bottom: 50rpx;
    background: linear-gradient(to right, #bdc3c7, #2c3e50);
    min-height: 1150rpx;
  }

  .bj {
    width: 100%;
    min-height: 500rpx;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0.1) 90%, rgba(255, 255, 255, 0) 100%);
  }

  .h_tag {
    font-size: 25px;
    float: left;
    color: white;
    padding: 5px 0;
  }

  .h_tag b {
    font-size: 16px;
    color: white;
    padding: 5px 0;
  }

  .h_content {
    color: white;
    font-size: 14px;
    float: left;
    width: 90%;
    height: 38.2px;
    padding: 5px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .h_vod {
    color: white;
    font-size: 14px;
    float: right;
    padding: 8rpx 15rpx;
    background: #bd9a40;
    border-radius: 15px;
    margin-top: 5px;
  }

  .img_content {
    margin-top: 400rpx;
    bottom: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
    height: 100px;
  }

  .img_content img {
    height: 120px;
  }

  .content_r {
    width: 40%;
    height: 110px;
    top: 165px;
    position: relative;
    left: 10px;
    border-radius: 10%;
    float: left;
  }

  .content_l {
    position: relative;
    height: 100px;
    width: 100%;
  }

  .cube-scroll-wrapper {
    background-color: #030303;
    height: 30px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
  }

  .list-wrapper {
    line-height: 0;
  }

  .flex_item {
    margin-top: 48rpx;
    display: flex;
    justify-content: flex-start;
    padding-left: 30rpx;

    .bor-ra {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      transform: scale(1.2);
      color: #fff;
    }

    .bor-ra2 {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .hengheng {
      position: absolute;
      bottom: 0;
      width: 20rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #FFFFFF;
    }
  }

  .indexbox {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    .indexbox_left2 {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 30%;
      height: 343rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
        color: white;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 307rpx;
        background-repeat: no-repeat;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-top: 55rpx;
      width: 47%;
      height: 310rpx;
      border-radius: 20rpx 20rpx 0 0;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 250rpx;
        border-radius: 20rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;

  }

  .indexbox_left {
    overflow: hidden;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 9;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }
</style>
